<template>
  <div>
    <div>
      <el-row>
        <el-col :span="20" v-for="(reserve,index) in reserveForm" :key="index"
                style="margin-left: 20px;margin-top: 40px">
          <el-card shadow="hover">
            <el-descriptions title="我的预约" border>
              <el-descriptions-item label="医生">{{ reserve.doctorName }}</el-descriptions-item>
              <el-descriptions-item label="挂号费">{{ reserve.price }}</el-descriptions-item>
              <el-descriptions-item label="预约时间">{{ reserve.timeSelection }}</el-descriptions-item>
              <el-descriptions-item label="地址">哈尔滨市呼兰区师大南路218号</el-descriptions-item>
              <el-descriptions-item label="总金额">{{reserve.totalPrice}}</el-descriptions-item>
              <el-descriptions-item label="提交时间">{{ reserve.reserveTime }}</el-descriptions-item>
            </el-descriptions>
            <el-steps :space="200" :active="reserve.reserveProgress" finish-status="success" style="margin-top: 10px">
              <el-step title="提交预约"></el-step>
              <el-step title="支付挂号费"></el-step>
              <el-step title="就诊"></el-step>
              <el-step title="缴费"></el-step>
            </el-steps>
              <el-button type="danger" style="float: right;margin-top: 2px;margin-bottom: 5px" @click="Cancel(reserve.id)" v-if="reserve.reserveProgress===1||reserve.reserveProgress===2">取消预约</el-button>
              <el-button type="primary" style="float: right;margin-top: 2px;margin-bottom: 5px;margin-right: 10px" @click="giveMoney(reserve.id)" v-if="reserve.reserveProgress===1||reserve.reserveProgress===2">支付挂号费</el-button>
            <el-button type="primary" style="float: right;margin-top: 2px;margin-bottom: 5px" @click="giveAllMoney(reserve.id,reserve.totalPrice)" v-if="reserve.reserveProgress===3">缴费</el-button>
            <span style="float: right;margin-top: 8px;margin-bottom: 9px" v-if="reserve.reserveProgress===4">已完成</span>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--支付的对话框    -->
    <div>
      <el-dialog title="支付" :visible.sync="dialogVisible" width="30%">
        <span>假装已经支付费用</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit()">确定支付</el-button>
        </span>
      </el-dialog>

    </div>
      <div>
          <el-dialog title="取消" :visible.sync="dialogVisibleT" width="30%">
              <span>确认取消嘛</span>
              <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleT = false">取 消</el-button>
          <el-button type="primary" @click="del()">确定</el-button>
        </span>
          </el-dialog>

      </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "MyAppointmentView",
  data() {
    return {
      reserveForm: [],
      user: localStorage.getItem("user") ? (JSON).parse(localStorage.getItem("user")) : {},
      dialogVisible: false,
        dialogVisibleT:false,
      priceParams: {}
    }
  },
  created() {
    this.getApplication();
  },
  methods: {
    getApplication() {
      request.get("/reserve/getApplication/" + this.user.name).then(res => {
        if (res.code === '0') {
          this.reserveForm = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //确认支付的方法 修改进度为2
    giveMoney(reserveId) {
      this.dialogVisible = true;
      this.priceParams.id = reserveId;
      this.priceParams.reserveProgress = 2;
    },

    //支付总金额
    giveAllMoney(reserveId,totalPrice) {
      this.dialogVisible = true;
      this.priceParams.id = reserveId;
      this.priceParams.totalPrice = totalPrice;
      this.priceParams.reserveProgress = 4;
    },
      //删除
      Cancel(reserveId) {
          this.dialogVisibleT = true;
          this.priceParams.id = reserveId;
      },

    submit() {
      request.post("reserve/setPrice/" ,this.priceParams).then(res=>{
        if (res.code === '0') {
          this.$message.success("支付成功");
          this.dialogVisible = false;
          this.getApplication();
        } else {
          this.$message.error(res.msg);
        }
      })
    },
      del(){
          request.delete("/reserve/" + this.priceParams.id).then(res => {
              if (res.code === '0') {
                  this.$message({
                      message: '取消成功',
                      type: 'success'
                  });
                  this.dialogVisibleT = false;
                  this.getApplication();
              } else {
                  this.$message({
                      message: res.msg,
                      type: 'success'
                  });
              }
          })
      }
  }
}
</script>


<style scoped>

</style>